<template>
  <div class="my-body">
    <div class="container">
      <el-form :model="register" label-width="80px" :rules="rules" ref="ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input type="text" v-model="register.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="register.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="passwordCheck">
          <el-input type="password" v-model="register.passwordCheck" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
              class="avatar-uploader"
              ref="upload"
              action="#"
              :show-file-list="false"
              :before-upload="beforeUpload"
              :on-success="handleChange"
              :on-change="onChange"
              :auto-upload="false"
              :data="addList">
            <img v-if="register.header_pic" :src="register.header_pic" class="avatar" alt>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <span style="color: red">{{msg}}</span>
        <el-button @click="submit">注册</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data(){
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {//todo 增加一致性检查
        if (this.register.password !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      console.log('check')
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.register.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return{
      register:{
        username:'',
        password:'',
        passwordCheck:'',
        'header_pic':''
      },
      addList:{},
      imageUrl:'',
      rules:{
        username:[
          {required:true,message:'请输入用户名',trigger:'blur'},
          {min:3,max:10,message:'长度为3到10',trigger: 'blur'}
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        passwordCheck: [
          { validator: validatePass2, trigger: 'blur' }
        ],
      },
      msg:''
    }
  },methods:{

    beforeUpload(){
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    onChange(file,fileList){
      var _this = this;
      var event = event || window.event;
      var file = event.target.files[0];
      var reader = new FileReader();
      //转base64
      reader.onload = function(e) {
        _this.register.header_pic = e.target.result //将图片路径赋值给src
      }
      reader.readAsDataURL(file);
    },
    handleChange(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    submit(){
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const result = await this.$store.dispatch('userRegister', this.register)
          if (result == true) {
            await this.$router.push('/login')
          }
        }
      })
    }
  }
}
</script>
<style scoped>

.my-body{
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  height: 100vh;
  background-image: url("/public/login-back.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.container {
  max-width: 800px;
  margin: 100px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 40%;       /* 居中 */
  right: 35%;       /* 右边 */
  transform: translate(0, -50%)
}
h1 {
  text-align: center;
}


.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
